<template>
  <atom-stock-list
    :table-data="tableData"
    :columns="columns"
    :tags-option="tagsOption"
    :footer-option="footerOption"
    @rowClick="rowClick"
    @sortChange="sortChange"
  >
    <template #body-stockName="{ row }">
      <div class="stock-name">
        <div class="center">{{ row.stockName }}</div>
        <div>
          <atom-tag type="minor-fill" class="tag-item" color="red" v-for="(item, index) in row.tags" :key="index">{{
            item
          }}</atom-tag>
        </div>
      </div>
    </template>
    <template #tagsRowRender="{ row }">
      <div class="reason">涨停原因：{{ row.reason }}</div>
      <AiWencai
        v-if="row.ztgl >= 60 && isShowWencai"
        style="margin-top: 12px"
        :componentType="1"
        :askText="row.askText"
        @click="handleClick"
      ></AiWencai>
    </template>
  </atom-stock-list>
</template>

<script>
import AiWencai from '@/components/common/AiWencai.vue';
import sortDataMixins from '@/mixins/sortDataMixins.js';
import { lbttColunm } from '@/scripts/tableColumn.js';

export default {
  name: 'ZtcsStockList',
  mixins: [sortDataMixins],
  components: {
    AiWencai,
  },
  inject: ['showWencai'],
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    footerOption: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tagsOption: {
        tagsable: true,
        fullWidth: true,
      },
      // 列数据配置
      columns: JSON.parse(JSON.stringify(lbttColunm)),
    };
  },
  methods: {
    sortChange(params) {
      this.sortData(this.columns, 'tableData', params);
    },
    rowClick(params) {
      const { date, stockCode, stockName, days, marketid } = params.row;
      this.$router.push({
        path: '/limitDetails',
        query: {
          stockcode: stockCode,
          date,
          marketid,
          boardNum: days,
          name: stockName,
          screenMode: window.getParam('screenMode'),
        },
      });
    },
    handleClick() {
      window.hxmPageStat(`${_Global.stat.pageId}_ztfp_ztfx`, { url_ver: _Global.stat.url_ver });
    },
  },
  computed: {
    isShowWencai() {
      return this.showWencai();
    },
  },
};
</script>

<style lang="less" scoped>
.atom-stock-list__wrap {
  margin: 0 32px;
}
.reason {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 36px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .atom-stock-list-header-cell__text {
  font-size: 28px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 36px;
  font-weight: 400;
}
/deep/ .atom-stock-list-body__left-wrap {
  padding-left: 0 !important;
}
/deep/ .atom-stock-list-header {
  .atom-stock-list-header__left-wrap {
    width: 156px !important;
    padding-left: 0 !important;
  }
  .atom-stock-list-header__center-wrap {
    flex: 1 !important;
    .atom-stock-list-header__center {
      width: 100% !important;
      .atom-stock-list__align-right {
        margin-left: 8px !important;
        &:nth-child(1) {
          width: 134px !important;
        }
        &:nth-child(2) {
          width: 214px !important;
        }
        &:nth-child(3) {
          width: 158px !important;
        }
      }
    }
  }
}
/deep/ .atom-stock-list-body {
  p {
    font-size: 32px !important;
    line-height: 40px;
    font-weight: 400;
  }
  .tag-item {
    margin-right: 12px;
  }
  .atom-stock-list-body__left-wrap {
    width: 156px !important;
    .atom-stock-list-body-row__height {
      .atom-stock-list-row-cell-wrap {
        .atom-stock-list__align-left {
          flex-direction: column;
          align-items: start;
        }
      }
    }
  }
  .atom-stock-list-body__center-wrap {
    flex: 1 !important;
    .atom-stock-list-body__center {
      width: 100% !important;
      .atom-stock-list__align-right {
        margin-left: 8px !important;
        &:nth-child(1) {
          width: 134px !important;
          p {
            width: 134px !important;
          }
        }
        &:nth-child(2) {
          width: 214px !important;
          p {
            width: 214px !important;
          }
        }
        &:nth-child(3) {
          width: 158px !important;
          p {
            width: 158px !important;
          }
        }
      }
    }
  }
}
/deep/.atom-stock-list-body-row__tag-height {
  height: fit-content !important;
}

/deep/ .atom-stock-list-row-cell-wrap {
  height: 116px;
}
/deep/ .atom-stock-list-body-row-tag {
  padding-bottom: 24px;
  padding-top: 0;
}
</style>
